<!doctype html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="大数据管理平台">
    <meta name="keywords" content="大数据管理平台 大数据">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>大数据管理平台</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/slide.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="wrap">
    <!-- 左侧菜单栏目块 -->
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv">
            <p id="logoP">
                <img id="logo" alt="大数据管理平台" src="images/logo.png"><span>大数据管理平台</span>
            </p>
        </div>
        <div class="meun-item meun-item-active" href="#sour"
             aria-controls="sour" role="tab" data-toggle="tab">
            <img src="images/icon_source.png">数据
        </div>
    </div>
    <!-- 右侧具体内容栏目 -->
    <div id="rightContent">
        <a class="toggle-btn" id="nimei"> <i
                class="glyphicon glyphicon-align-justify"></i>
        </a>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="sour">
                <div class="check-div form-inline">
                    <h6 style="padding-top: 15px;">
                        <strong>数据模拟-JDBC</strong>
                    </h6>
                </div>
                <!--check-div-->
                <div class="data-div">
                    <div class="row tableHeader"></div>
                    <div class="tablebody">
                        <div class="row">
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                <span>数据表名:</span>
                            </div>
                            <div
                                    class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
									<span><input type="text" class="form-control"
                                                 id="cn" name="cn"></span>
                            </div>
                        </div>

                        <div id="collapseSystem" class="collapse in" aria-expanded="true">
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>样本数据表名：</span>
                                </div>
                                <div
                                        class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     name="sdt" id="sdt"></span>
                                </div>
                            </div>
                        </div>
                        <div id="collapseSystem" class="collapse in" aria-expanded="true">
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>模拟的数据量（条）：</span>
                                </div>
                                <div
                                        class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     name="ds" id="ds"></span>
                                </div>
                            </div>
                        </div>
                        <div id="collapseSystem" class="collapse in" aria-expanded="true">
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <span>并行数：</span>
                                </div>
                                <div
                                        class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
										<span><input type="text" class="form-control"
                                                     name="mps" id="mps"></span>
                                </div>
                            </div>
                        </div>
                        <!--数据管理-->
                        <div id="collapseAccount" class="collapse in"
                             aria-expanded="true">
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
                                <span id="updateRow"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--页码块-->
            <footer class="footer">
                <form role="form">
                    <div class="form-group">
                        <button type="button" onclick="genData()"
                                class="btn btn-yellow">开始构建数据
                        </button>
                        <button type="button" onclick="runRefresh()"
                                class="btn btn-default" id="fresh">刷新
                        </button>
                        <button type="button" onclick="stopRefresh()"
                                class="btn btn-default" id="noFresh">停止刷新
                        </button>
                    </div>
                </form>
            </footer>
        </div>
        <script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(function () {
                $(".meun-item").click(function () {
                    $(".meun-item").removeClass("meun-item-active");
                    $(this).addClass("meun-item-active");
                    var itmeObj = $(".meun-item").find("img");
                    itmeObj.each(function () {
                        var items = $(this).attr("src");
                        items = items.replace("_grey.png", ".png");
                        items = items.replace(".png", "_grey.png")
                        $(this).attr("src", items);
                    });
                    var attrObj = $(this).find("img").attr("src");
                    ;
                    attrObj = attrObj.replace("_grey.png", ".png");
                    $(this).find("img").attr("src", attrObj);
                });


            })

            var intervalId;
            function genData() {
                var cn = document.getElementById("cn").value;
                var sdt = document.getElementById("sdt").value;
                var ds = document.getElementById("ds").value;
                var mps = document
                        .getElementById("mps").value;
                var para = "cn=" + cn + "&sdt=" + sdt
                        + "&ds=" + ds
                        + "&mps=" + mps;
                var url = "./gen/jdbcData";
                $.ajax({
                    type: "GET",
                    async: true,
                    data: para,
                    url: url,
                    success: function (data) {
                        $("#output").html(data);
                    },
                    error: function (data) {
                        $("#output").html(data);
                    }
                })
                intervalId = window.setInterval(runRefresh, 1000);
            }

            function runRefresh() {
                var url = "./solr/info";
                $.ajax({
                    type: "GET",
                    async: true,
                    url: url,
                    success: function (data) {
                        $("#updateRow").html("<font color='green'>" + data.responseText + "</font>");
                    },
                    error: function (data) {
                        $("#updateRow").html("<font color='green'>" + data.responseText + "</font>");
                    }
                })
            }

            function stopRefresh() {
                window.clearInterval(intervalId);
            }
        </script>
</body>
</html>
